<script lang="ts" setup>

import { onMounted, ref, onBeforeMount } from 'vue';

import { Search } from '@element-plus/icons-vue'
import ethics from './ethics.vue';
import institution from './institution.vue';
const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
    },

]
const input2 = ref('')
const currentPage2 = ref(5)
const pageSize2 = ref(100)
const size = ref(10)
const actList = ref(['医院', '机构', '伦理', '科室', '科室成员', '认证专业', '不良反应上报', '合作申办方'])

const active = ref(0)
const changeAct = (val: any) => {
    active.value = val
}
const testAct = ref('0')
const changeTest = (val: any) => {
    testAct.value = val
}

</script>
<template>

   
    <h3>中华人民共和国国家卫生健康委员会</h3>
    <el-table :data="tableData" align="left" header-row-class-name="headerName" :border="false" style="width: 100%">
        <el-table-column prop="date" label="部门"></el-table-column>
        <el-table-column prop="date" label="联系电话"></el-table-column>
        <el-table-column prop="date" label="传真"></el-table-column>
        <el-table-column prop="date" label="邮箱"></el-table-column>
        <el-table-column prop="date" label="邮编"></el-table-column>
        <el-table-column prop="date" label="联系地址"></el-table-column>
        <el-table-column prop="date" label="备注"></el-table-column>

    </el-table>
    <h3>河南省药品监督管理局</h3>
    <el-table :data="tableData" align="left" header-row-class-name="headerName" :border="false" style="width: 100%">
        <el-table-column prop="date" label="部门"></el-table-column>
        <el-table-column prop="date" label="联系电话"></el-table-column>
        <el-table-column prop="date" label="传真"></el-table-column>
        <el-table-column prop="date" label="邮箱"></el-table-column>
        <el-table-column prop="date" label="邮编"></el-table-column>
        <el-table-column prop="date" label="联系地址"></el-table-column>
        <el-table-column prop="date" label="备注"></el-table-column>

    </el-table>   



</template>
<style scoped lang="scss">
.containers {
    // background-color: #fff;
    height: calc(100% - 40px);
    margin: 20px auto;
}

button {
    width: 120px;
    height: 36px;
    background-color: #F5F5F5;
    font-size: 16px;
    margin-right: 11px;
    cursor: pointer;
    color: #333333;
}

.on {
    background-color: #0C9397;
    color: #fff;
}

.searchHeader {
    display: flex;
    margin: 20px 0;
    align-items: center;
    justify-content: space-between;

    .input {
        margin-right: 13px;
    }



}

.pagination {
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;
}






.contentbox {
    background-color: #fff;
    padding: 20px;
    margin-top: 20px;
}

.hospitalInfo {
    line-height: 1;
    color: #888888;
    font-size: 16px;
    align-items: center;
    display: flex;

    img {

        margin-right: 10px;
    }

    p {
        color: #333;
        margin-bottom: 10px;
    }

    ul {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 10px;

        li {
            width: 44px;
            height: 26px;
            background: #0C9397;
            border-radius: 3px;
            margin-right: 5px;
            color: #fff;
            text-align: center;
            line-height: 26px;
        }
    }
}

.tabList {
    display: flex;
    align-items: center;
    margin-top: 16px;
    color: #333;
    padding-bottom: 20px;
    border-bottom: 1px solid #EBEBEB;

    li {
        cursor: pointer;
        margin-right: 60px;
        min-width: 64px;
    }

    .on {
        background-color: #0C9397;
        color: #fff;
        padding: 8px 15px;
        font-size: 16px;
    }
}

h3 {
    margin: 20px 0;
    font-size: 16px;
    color: #333333;
    position: relative;
    padding-left: 8px;
}

h3::before {
    position: absolute;
    clear: both;
    width: 3px;
    height: 16px;
    content: '';
    left: 0px;
    background-color: #0C9397;
}
</style>